<template>
    <view>
        <!-- pages/searchParkspace/searchParkspace.wxml -->
		<view class="head-block" v-if="weixin == 2">
		     <view class="nav-title" :style="'top:10px'"></view>
			 <!-- 返回 -->
			 <view class="icon" @tap="goMy" :style="'top:6px'">
			      <van-icon name="arrow-left" color="#333" size="45rpx" />
			  </view>
		 </view>
        <view>
			
            <view class="top-box" :style="weixin == 2 ? 'top:100rpx' :'' ">
                <view class="contain-box" :style="weixin == 2 ? 'top:128rpx' :'top:30rpx'">
                    <!-- <view class="logo" @tap="goBack"><van-icon name="arrow-left" size="22" /></view> -->
                    <view class="search-div">
                        <van-search
                            focus
                            v-model="autoSearch"
                            placeholder="搜索目的地/车场名称"
                            class="input-item"
                            @focus="focusInput"
                            :adjust-position="false"
                            @search="getAddress"
                            @clear="clearInput"
                            :use-left-icon-slot="true"
                            @blur="inputBlur"
                        >
                            <view slot="left-icon">
                                <image src="/static/pages/index/imgs/search.png" class="slot-left"></image>
                            </view>
                        </van-search>
                    </view>
                </view>
            </view>
            <!-- 搜索历史列表 -->
            <view v-if="autoSearch == ''" class="search-area">
                <view v-if="historyList.length > 0">
                    <view class="topline"></view>
                    <view class="history-box">
                        <view class="history-title">历史记录</view>
                        <view class="history-clear" @tap="clearHistory">清除记录</view>
                    </view>
                    <view v-for="(item, index) in historyList" :key="index">
                        <view class="search-list" @tap="gotoFromHistoty" :data-data="item" :data-id="index">
                            <view>
                                <view class="address-name">
                                    <image src="/static/pages/index/imgs/distance.png"></image>
                                    {{ item.name }}
                                </view>
                                <view class="addr-content">地址：{{ item.district + item.address }}</view>
                            </view>
                        </view>

                        <view class="middleline"></view>
                    </view>
                </view>
            </view>
            <!-- 地址 -->
            <view v-else class="search-area">
                <view v-if="addressList.length > 0">
                    <view class="topline"></view>
                    <view v-for="(item, index) in addressList" :key="index">
                        <view class="search-list" @tap="selectAddr" :data-data="item">
                            <view>
                                <view class="address-name">
                                    <image src="/static/pages/index/imgs/distance.png"></image>
                                    {{ item.name }}
                                </view>
                                <view class="addr-content">地址：{{ item.district + item.address }}</view>
                            </view>
                            <!-- <view style="float:right" catchtap="gotoNavigate" data-data="{{item}}">
            <image src="/assets/img/navigation.png" class="navigateimg route-img"></image>
            <view class="navigatetext">路线</view>
          </view> -->
                        </view>

                        <view class="middleline"></view>
                    </view>
                </view>
                <!-- <view style="min-height: 700rpx; text-align: center; padding-top: 250rpx" v-if="addressList.length == 0">搜索无结果</view> -->
            </view>
        </view>
        <view>
            <map id="mymap" class="mapcontainer" style="display: none"></map>
        </view>
    </view>
</template>

<script>
// pages/searchParkspace/searchParkspace.js
import util from './../../utils/util.js';
import api from './../../utils/api.js';
// import Toast from '@vant/weapp/toast/toast';

var amapFile = require('../../utils/amap-wx.js');

export default {
    data() {
        return {
            marginTopmenuBtn: uni.getMenuButtonBoundingClientRect(),
            autoSearch: '',
            addressList: [],
            historyList: [],

            //跳到该页面传过来的url
            url: null,
			weixin:uni.getStorageSync('weixin'),
            mapname: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.setData({
            historyList: uni.getStorageSync('searchHistory') || [],
            url: options.url && options ? options.url : null
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    // onShareAppMessage: function () {
    // }
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */ methods: {
        // 点击返回
        goBack() {
            // wx.navigateTo({
            //   url: '../index/index',
            // })
            uni.navigateBack({
                delta: 1
            });
        },

        // 清除记录
        clearHistory() {
            uni.removeStorageSync('searchHistory');
            this.setData({
                historyList: []
            });
        },

        /**
         * 搜索框失去焦点-若搜索内容为空，则默认返回
         */
        inputBlur() {
            if (this.autoSearch == '') {
                this.clearInput();
            }
        },
		goMy() {
		     uni.navigateBack({
		         delta: 1
		     });
		 },
        /**
         * 搜索框聚焦
         */
        focusInput() {
            // let that = this;
            // this.setData({
            //   btmTop: this.data.btmTop==200?200:500,
            //   showSearch:true,
            //   isScroll: true,
            //   showBack:true,
            // });
        },

        //清除搜索框输入内容
        clearInput() {
            this.setData({
                autoSearch: '',
                addressList: []
            }); // this.getCurLocation()
        },

        //搜索框输入中事件
        getAddress(e) {
			
            this.setData({
                autoSearch: e
            });
            uni.showLoading({
                title: '搜索中'
            });
            this.getPoi();
        },

        /**
         * 搜索地址的方法--必须在以下地址里为对应的小程序购买服务，并将订单数据下的appid放到下面的“service"中
         * https://fuwu.weixin.qq.com/service/detail/00002c301c0ac83ddc996d8ca56015
         */
        // getPoi() {
        //   const data = {
        //     keyword: this.data.autoSearch,
        //     boundary: "region(杭州)"
        //   };
        //   wx.serviceMarket.invokeService({
        //       service: 'wxc1c68623b7bdea7b',
        //       api: "poiSearch",
        //       data: data
        //     })
        //     .then(res => {
        //       wx.hideLoading()
        //       const result =
        //         typeof res.data === "string" ? JSON.parse(res.data) : res.data;
        //       this.setData({
        //         addressList: result.data
        //       });
        //     })
        //     .catch(err => {
        //       wx.hideLoading()
        //       console.error(err);
        //     });
        // },
        // v2.6更新---使用高德提供的地址搜索
        getPoi() {
            var that = this;
            var myAmapFun = new amapFile.AMapWX({
                key: 'a29210026b1d7fd7df6f765b2588c301'
            });
            myAmapFun.getInputtips({
                keywords: this.autoSearch,
                location: '浙江',
                city: '杭州市',
                success: function (data) {
                    uni.hideLoading();

                    if (data && data.tips) {
                        that.setData({
                            addressList: data.tips
                        });
                    }
                }
            });
        },

        /**选择搜索的列表里的地址 */
        selectAddr(e) {
            let data = e.currentTarget.dataset.data;

            if (this.url) {
                //从非首页的其他模块跳转到本页
                let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。

                let prevPage = pages[pages.length - 2]; //prevPage 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面，-3是上上个页面以此类推。

                prevPage.setData({
                    // 将我们想要传递的参数在这里直接setData。上个页面就会执行这里的操作。
                    mapname: data
                });
            } //从首页的其他模块跳转到本页

            uni.setStorageSync('isSearching', true); //标记正在搜索，便于跳转首页后进行搜索操作

            if (this.historyList.length == 10) {
                // 满10条后删除最后一条，同时再新增一条
                let list = this.historyList;
                list.pop();
                list.unshift(data);
                uni.setStorageSync('searchHistory', list);
            } else {
                let list = this.historyList;
                list.unshift(data);
                uni.setStorageSync('searchHistory', list);
            } // wx.navigateTo({
            //   url: '../index/index',
            // })
            uni.navigateBack({
                delta: 1
            });
        },

        // 从历史记录跳转
        gotoFromHistoty(e) {
            let data = e.currentTarget.dataset.data;

            if (this.url) {
                //从非首页的其他模块跳转到本页
                let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。

                let prevPage = pages[pages.length - 2]; //prevPage 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面，-3是上上个页面以此类推。

                prevPage.setData({
                    // 将我们想要传递的参数在这里直接setData。上个页面就会执行这里的操作。
                    mapname: data
                });
            } //从首页的其他模块跳转到本页

            let index = e.currentTarget.dataset.id;
            let list = this.historyList;
            list.splice(index, 1);
            list.unshift(data);
            uni.setStorageSync('searchHistory', list); // 把选中的先删掉 再推到第一个-保证选中的永远在数组第一列

            uni.setStorageSync('isSearching', true); // wx.navigateTo({
            //   url: '../index/index?',
            // })

            uni.navigateBack({
                delta: 1
            });
        },

        /**
         * 搜索列表的导航
         */
        gotoNavigate(e) {
            // console.log(e);
            const data = e.currentTarget.dataset.data;
            let param = {
                latitude: Number(data.location.lat),
                longitude: Number(data.location.lng),
                address: data.address
            };
            this.onRunApi(param);
        },

        /**调用导航 */

        /**需要引入util判断版本
     * @param {e} e 参数e是一个对象
     * address:目标地址，必填
     * latitude:目标地址纬度,必须是number类型
     * longitude：目标地址经度，必须是number类型
     * 必须在wxml页面创建一个地图，若是不展示地图则将地图设置hidden=true,可将下列代码直接复制
     * <view hidden="true">
      <map
          class="map"
          id="mymap"
      >
        </map>
      </view>
     */
        onRunApi(e) {
            const version = uni.getSystemInfoSync().SDKVersion;
			if(uni.getStorageSync('weixin') == 2){
				jWeixin.miniProgram.navigateTo({
					url: "/pages/map/map?lat=" + e.latitude + '&long=' + e.longitude
				})
			}else{
				// window.location.href = 'http://api.map.baidu.com/marker?location=' + e.latitude + ',' + e.longitude +'&title='+ e.address +'&content=&output=html' //百度
				// window.location.href = 'http://apis.map.qq.com/uri/v1/marker?marker=coord:' + e.latitude + ',' + e.longitude +';addr:'+ e.address   //腾讯导航
				window.location.href = 'http://uri.amap.com/marker?position=' + e.latitude + ',' + e.longitude +'&name='+ e.address +'&coordinate=gaode&callnative=1'  //高德
			}
			// window.location.href = 'http://api.map.baidu.com/marker?location=' + e.latitude + ',' + e.longitude +'&title='+ e.address +'&content=&output=html' //百度
			// window.location.href = 'http://apis.map.qq.com/uri/v1/marker?marker=coord:' + e.latitude + ',' + e.longitude +';addr:'+ e.address   //腾讯导航
			// window.location.href = 'http://uri.amap.com/marker?position=' + e.latitude + ',' + e.longitude +'&name='+ e.address +'&coordinate=gaode&callnative=1'  //高德
            // if (util.compareVersion(version, '2.14.0') < 0) {
            //     uni.showToast({
            //         title: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。',
            //         icon: 'none'
            //     });
            //     return;
            // }

            // const mapCtx = uni.createMapContext('mymap');
            // mapCtx.openMapApp({
            //     latitude: e.latitude,
            //     longitude: e.longitude,
            //     destination: e.address,
            //     complete: (res) => {
            //         console.log(res);
            //     }
            // });
        }
    }
};
</script>
<style>
@import './searchParkspace.css';
</style>
